<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/js/export-table.js"></script>
    <link rel="stylesheet" href="/static/font/iconfont.css">

    <style>
        input {
            outline: none;
            -webkit-appearance: none;
            border-radius: 0;
            border-style: none;
            background-color: transparent;
        }

        .main {
            background: white;
            min-height: 490px;
            box-shadow: 1px 1px 2px #AAAAAA;
        }

        .layui-form-item {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .layui-input-inline {
            width: 240px !important;
        }
    </style>
</head>
<body style="margin: 15px;height: 95%">
<input id="touristAttraction" type="hidden" value="<$ touristAttraction $>">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>个人签到率</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <label class="layui-form-label" style="width: 50px">时间段</label>
    <div class="layui-input-inline" style="width: 180px">
        <input type="text" class="layui-input" id="time" placeholder=" - ">

    </div>
    <button class="layui-btn" style=" margin-left: 20px" onclick="searchDB()">查询</button>
    <button class="layui-btn" style=" margin-left: 20px" onclick="exportExcel()">导出</button>
    <a id="dlink" style="display: none;"></a>

</blockquote>
<div style="overflow: auto;height: 70%">
    <table class="layui-table" id="test"style=" table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
    margin: auto;/*table居中*/
    text-align: center;
    border: 1px solid #804040;
    border-collapse: collapse;">
    </table>
</div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/layui/layui.js"></script>
<script>
  function searchDB() {
    begin = $('#time').val().split(' - ')[0];
    end = $('#time').val().split(' - ')[1];
    var getData = {
      startDate: begin,
      endDate: end
    };

    function getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2017-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2017-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return Math.floor(ms / 1000 / 60 / 60);
    }

    $.get("/report/personQuery?x-tm-token=" + localStorage.tmToken, getData, function (res) {
      if (res.errno == 0) {

        var htmlStr = '    <tr>\n' +
          '        <th rowspan="2" width="100px">序号</th>\n' +
          '        <th rowspan="2" width="100px">导游姓名</th>\n' +
          '        <th rowspan="2" width="150px">天目湖接待团数</th>\n';

        for (var m = 0; m < touristAttraction.length; m++) {
          htmlStr += ' <th colspan="4" width="400px"> ' + touristAttraction[m].name + '</th>\n'
        }

        htmlStr += ' </tr>';
        htmlStr += '<tr>';
        for (var m = 0; m < touristAttraction.length; m++) {
          htmlStr += ' <th width="100px">实际签到</th>\n'
          htmlStr += ' <th width="100px">抵达率</th>\n'
          htmlStr += ' <th width="100px">考核标准</th>\n'
          htmlStr += ' <th width="100px">是否合格</th>\n'
        }
        htmlStr += '</tr>';
        for (var k = 0; k < res.data.length; k++) {
          htmlStr += '<tr>';
          htmlStr += '<td>' + (k + 1) + ' </td>';
          htmlStr += '<td>' + res.data[k].guide_name + ' </td>';
          htmlStr += '<td>' + res.data[k].count + ' </td>';
          for (var m = 0; m < touristAttraction.length; m++) {
            if(res.data[k].counts.length===0){
              htmlStr += ' <td width="100px">0</td>\n';
              htmlStr += ' <td width="100px">0</td>\n';
              htmlStr += ' <td width="100px">'+touristAttraction[m].person_rate+'%</td>\n';
              htmlStr += ' <td width="100px">不合格</td>\n';
            }else {
              for (var l = 0; l < res.data[k].counts.length; l++) {
                if (touristAttraction[m].type_code === res.data[k].counts[l].type) {
                  htmlStr += ' <td width="100px">' + res.data[k].counts[l].count + '</td>\n';
                  htmlStr += ' <td width="100px">' + ((res.data[k].counts[l].count / res.data[k].count) * 100).toFixed(2) + "%" + '</td>\n';
                  htmlStr += ' <td width="100px">'+touristAttraction[m].person_rate+'%</td>\n';
                  var goodStr='不合格';
                  if((res.data[k].counts[l].count / res.data[k].count) * 100 >= touristAttraction[m].person_rate){
                    goodStr='合格';
                  }
                  htmlStr += ' <td width="100px">'+goodStr+'</td>\n';
                  break;
                }
                if (l === res.data[k].counts.length - 1) {
                  htmlStr += ' <td width="100px">0</td>\n';
                  htmlStr += ' <td width="100px">0</td>\n';
                  htmlStr += ' <td width="100px">'+touristAttraction[m].person_rate+'%</td>\n';
                  htmlStr += ' <td width="100px">不合格</td>\n';
                }
              }
            }
          }
          htmlStr += '</tr>';
        }


        $('#test').html(htmlStr);
      } else {
        $('#test').html('');
        layer.msg(res.errmsg);
      }
    });
  }

  function exportExcel() {
    if ($('#test').html()) {
      HtmlExportToExcel('test', $('#time').val() + '个人签到率');
    } else {
      layer.msg('暂无表单数据');
    }
  }

  function format(date, format) {
    var o = {
      "M+": date.getMonth() + 1, // month
      "d+": date.getDate(), // day
      "h+": date.getHours(), // hour
      "m+": date.getMinutes(), // minute
      "s+": date.getSeconds(), // second
      "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
      "S": date.getMilliseconds()
      // millisecond
    };
    if (/(y+)/.test(format))
      format = format.replace(RegExp.$1, (date.getFullYear() + "")
        .substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
          : ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }


  var $, layer, laydate, ran, begin, end, touristAttraction;
  layui.use(['layer', 'laydate',], function () {
    $ = layui.jquery;
    touristAttraction = JSON.parse($('#touristAttraction').val());
    layer = layui.layer;
    laydate = layui.laydate;
    begin = new Date();
    end = new Date();
    new Date(begin.setMonth((new Date().getMonth() - 1)));
    begin = format(begin, "yyyy-MM-dd");
    end = format(end, "yyyy-MM-dd");
    ran = begin + ' - ' + end;
    laydate.render({
      elem: '#time',
      format: 'yyyy-MM-dd'
      , value: ran
      , range: true,
      done: function (value, date, endDate) {
        begin = value.split(' - ')[0];
        end = value.split(' - ')[1];
      }
    });
    $('#time').val(ran);
    searchDB();

  });
</script>

</body>
</html>
